import React, { Component } from 'react';

// 创建上下文
const { Provider, Consumer } = React.createContext();

const Node = () => (
  <div style={{ border: '1px solid green', padding: 12 }}>
    Node
    <SubNode />
    <Consumer>
      {(value) => {
        return <div>{value}</div>;
      }}
    </Consumer>
  </div>
);
const SubNode = () => (
  <div style={{ border: '1px solid blue', padding: 12 }}>
    SubNode
    <Child />
    <Consumer>
      {(value) => {
        return <div>{value}</div>;
      }}
    </Consumer>
  </div>
);

const Child = () => (
  <div style={{ border: '1px solid green', padding: 12 }}>
    Child
    <Consumer>
      {(value) => {
        return <div>{value}</div>;
      }}
    </Consumer>
  </div>
);

export default class App extends Component {
  render() {
    return (
      <Provider value={<h1>wahaha</h1>}>
        <div style={{ border: '1px solid red', padding: 12 }}>
          <h1>我是App组件</h1>
          <Node />
        </div>
      </Provider>
    );
  }
}
